<script lang="ts">
import { ref, defineComponent } from "vue";
import { getAdvImages } from "@/network/api";
import 'element-plus/es/components/message/style/css'
import router from "@/router";

export default defineComponent({
  setup() {
    const handleGoEcology = () => {
      router.push({
        path:"/Ecology"
      })
    };
    const contactData = ref() as any;
    const contactBgImage = ref() as any
    
    getAdvImages({ type: "adv" }).then((res) => {
      contactData.value = res.data[0];
      contactBgImage.value = res.data[0].url
    });
    return {
      contactData,
      contactBgImage,
      handleGoEcology,
    };
  },
});
</script>

<template>
  <div class="contact" :style="{ backgroundImage: 'url('+contactBgImage+')'}">
    <el-row>
      <el-col :span="12">
        <div class="box">
          <div class="bigTitle">{{ contactData?.title }}</div>
          <div class="contact-demand contentText">
            {{ contactData?.desc }}
          </div>
          <el-button @click="handleGoEcology" color="#064DD6" size="large" type="primary" round
            class="contact-btn">点击查看
          </el-button>
        </div>
      </el-col>
      <!-- <el-col :span="12">
        <div class="contactImg">
          <img :src="contactData?.url" alt="" />
        </div>
      </el-col> -->
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
@import url("@/assets/css/content.css");

.content {
  margin: 0 auto;
  padding: 40px 0 40px 0;
}

.contact {
  border-radius: 15px;
  background-size: 100% 100%;

  .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    margin-left: 25%;
    padding: 10% 0;

    .contact-title {
      font-size: $title;
      font-weight: bold;
      color: $auxiliaryColor;
    }

    .contact-demand {
      margin: 20px 0 30px 0;
    }

    .contact-btn {
      width: 120px;
    }
  }

  .contactImg {
    display: flex;
    position: absolute;
    max-height: 100%;
    bottom: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

@media screen and (max-width: 450px) {
  .content {
    padding: 20px !important;
  }

  .contact {
    .box {
      margin-left: 20% !important;
    }
  }
}
</style>